<template>
  <el-dialog :title="!editId?'编辑承诺书':'承诺书'" :append-to-body="true" :visible.sync="dialogVisible"
             @close="$emit('update:visible',false)" width="60%">
    <div>
      <!--<el-input v-model="commitmentEdit" placeholder="填写承诺书内容" type="textarea"></el-input>-->
      <quill-editor v-model="commitmentEdit"
                    ref="myQuillEditor"
                    class="editer"
                    :options="editorOption" @ready="onEditorReady($event)" placeholder="通知内容">
      </quill-editor>
    </div>
    <!--    <div v-else v-html="editBody">-->
    <!--    </div>-->
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="small">取 消</el-button>
      <el-button type="primary" @click="submitCheckFn" size="small">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {quillEditor} from 'vue-quill-editor' // 调用编辑器
import quillConfig from '@/assets/js/quill-config.js'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  name: 'studentMultiple',
  props: ['visible', 'editId', 'commitment'],
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    }
  },
  components: {
    quillEditor
  },
  data() {
    return {
      dialogVisible: this.visible,
      commitmentEdit: '',
      editBody: '',
      editorOption: quillConfig,
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        console.log('获取到得承诺书：', this.commitment)
        this.editBody = this.commitment
        this.commitmentEdit = this.commitment
      }
    }
  },
  created() {
  },

  methods: {
    // 初始化
    submitCheckFn() {
      this.$emit('commitmentEditFn', this.commitmentEdit)
      this.dialogVisible = false
    },
    onEditorReady(editor) {
    }
  },
  mounted() {
  }
}
</script>
